<template>
  <div id="luckysheet" ref="luckysheetContainer" style="height: 100%; width: 100%;"></div>
</template>

<script>
import 'luckysheet/dist/plugins/css/luckysheet.css';
import luckysheet from 'luckysheet';

export default {
  name: 'Luckysheet',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.initLuckysheet();
  },
  methods: {
    initLuckysheet() {
      luckysheet.init({
        container: this.$refs.luckysheetContainer,
        lang: 'zh', // 设置语言
        data: this.data, // 使用父组件传递的数据
        showToolbar: true,
        showInfobar: true,
        allowEdit: true,
        columnHeader: true,
        rowHeader: true
      });
    },
    // 提供一个方法来获取 Luckysheet 中的数据
    getData() {
      return luckysheet.getData();
    }
  }
};
</script>

<style scoped>
/* 可以在这里调整 Luckysheet 的样式 */
#luckysheet {
  height: 600px; /* 或者你需要的高度 */
}
</style>
